<!-- 登录页面 -->
<template>
  <div class="login">
    <!-- 登录框 -->
    <div class="login__box">
      <h1>欢迎登录</h1>
      <el-form class="login__box--form" ref="loginForm" :model="loginForm" label-width="80px" label-position="top">
        <el-form-item>
          <el-input v-model.trim="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入账号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginClick">
            登
            <span>录</span>
          </el-button>
        </el-form-item>
        <el-form-item>
          没有账号？
          <el-link type="primary" :underline="false" @click="dialogClick">点击注册</el-link>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册弹窗 -->
    <el-dialog title="注册" :visible.sync="dialogVisible" width="30%" @close="closeRegister" :close-on-click-modal="false">
      <el-form ref="form" :model="registForm" label-width="50px">
        <el-form-item label="账号">
          <el-input v-model.trim="registForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model.trim="registForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="registerClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { login, register } from '../api/index.js';
export default {
  name: '',
  props: [''],
  beforeCreate() {
    localStorage.removeItem('userInfo');
  },
  data() {
    return {
      // 登录表单
      loginForm: {
        username: '',
        password: '',
      },
      // 弹窗
      dialogVisible: false,
      // 注册表单
      registForm: {
        username: '',
        password: '',
        role: 'user',
      },
    };
  },
  methods: {
    // 登录
    loginClick() {
      if (this.loginForm.username == '' || this.loginForm.password == '') {
        this.$message({
          message: '账号或者密码不可以为空',
          type: 'warning',
        });
        return;
      }
      login(this.loginForm).then((res) => {
        if (res.code === 200) {
          localStorage.setItem('userInfo', JSON.stringify(res.data));
          this.$router.push('/homePage');
        } else if (res.code === 400) {
          this.$message.error(res.msg);
        }
      });
    },
    dialogClick() {
      this.dialogVisible = !this.dialogVisible;
    },
    closeRegister() {
      this.registForm = {
        username: '',
        password: '',
        role: 'user',
      };
    },

    // 注册
    registerClick() {
      if (this.registForm.username == '' || this.registForm.password == '') {
        this.$message({
          message: '账号或者密码不可以为空',
          type: 'warning',
        });
        return;
      }
      register(this.registForm).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
          });
          Object.assign(this.loginForm, this.registForm);
          this.dialogVisible = !this.dialogVisible;
        } else if (res.code === 400) {
          this.$message({
            message: res.msg,
            type: 'warning',
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: url('../assets/imgs/login.png') no-repeat;
  background-size: cover;
  min-width: 1336px;
  overflow: hidden;
}
.login__box {
  width: 430px;
  height: 460px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  -webkit-box-shadow: 2px 0px 30px -2px rgba(176, 173, 176, 1);
  -moz-box-shadow: 2px 0px 30px -2px rgba(176, 173, 176, 1);
  box-shadow: 2px 0px 30px -2px rgba(176, 173, 176, 1);
  margin-left: 55%;
  margin-top: 10%;
  padding: 30px 75px;
  box-sizing: border-box;
  h1 {
    color: #3da7fd;
    font-family: KaiTi;
    letter-spacing: 0.5rem;
  }
}
.login__box--form {
  margin-top: 55px;
}
</style>
<style lang="scss">
.login__box--form {
  .el-input__inner {
    border-radius: 20px;
    border-color: #3da7fd;
    padding-left: 45px;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: #3da7fd;
  }
  .el-input__icon {
    width: 40px;
    font-size: 20px;
  }
  .el-form-item {
    margin-bottom: 40px;
    .el-button {
      width: 100%;
      border-radius: 20px;
      letter-spacing: 0.5rem;
      text-align: center;
    }
  }
}
</style>